<template>
    <div class="">
        <x-header class="header" :left-options="{backText: ''}">终端跟踪信息</x-header>
        <div class="content pad">
            <cell title="终端串码" :value="searchKey"></cell>
            <cell title="商品名称" >
                <div style="max-width:15em;">{{comdity_name}}</div>
            </cell>
            <div class="block" v-if="list_1.length">
                <divider>在网信息</divider>
                <x-table :cell-bordered="false" >
                    <thead>
                    <tr>
                        <!-- <th>商品编号</th> -->
                        <th>终端状态</th>
                        <th>装维人</th>
                        <th>宽带号码</th>
                    
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(x,i) of list_1" :key="i">
                        <!-- <td><div>{{x.comdity_code}}</div></td> -->
                        <td><div>{{x.sale_state_name}}</div></td>
                        <td>{{x.fix_oper_name}}</td>
                        <td><div>{{x.broadband}}</div></td>
                    </tr>    
                    </tbody>
                </x-table>
            </div>
            <div class="block" v-if="list_4.length">
                <divider>待装信息</divider>
                <x-table :cell-bordered="false" >
                    <thead>
                    <tr>
                        <!-- <th>商品编号</th> -->
                        <th>终端状态</th>
                        <th>装维人</th>
                        <th>宽带号码</th>
                    
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(x,i) of list_4" :key="i">
                        <!-- <td><div>{{x.comdity_code}}</div></td> -->
                        <td><div>{{x.sale_state_name}}</div></td>
                        <td>{{x.fix_oper_name}}</td>
                        <td><div>{{x.broadband}}</div></td>
                    </tr>    
                    </tbody>
                </x-table>
            </div>
            <div class="block" v-if="list_2.length">
                <divider>在库信息</divider>
                <x-table :cell-bordered="false" >
                    <thead>
                    <tr>
                        <!-- <th>商品编号</th> -->
                        <th>ESS渠道名称</th>
                        <th>入库时间</th>
                        <th>更新时间</th>
                    
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(x,i) of list_2" :key="i">
                        <!-- <td><div>{{x.comdity_code}}</div></td> -->
                        <td><div>{{x.ess_chanel_name}}</div></td>
                        <td>{{x.first_storage_date}}</td>
                        <td><div>{{x.update_date}}</div></td>
                    </tr>    
                    </tbody>
                </x-table>
            </div>
            <div class="block" v-if="list_3.length">
                <divider>业务工单</divider>
                <x-table :cell-bordered="false" >
                    <thead>
                    <tr>
                        <!-- <th>商品编号</th> -->
                        <th>业务类型</th>
                        <th>创建人</th>
                        <th>创建时间</th>
                    
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(x,i) of list_3" :key="i">
                        <!-- <td><div>{{x.comdity_code}}</div></td> -->
                        <td><div>{{x.business}}</div></td>
                        <td>{{x.create_code}}</td>
                        <td><div>{{x.create_date|prettyDate}}</div></td>
                    </tr>    
                    </tbody>
                </x-table>
            </div>
        </div>
         
    </div>
</template>

<script>
import { XHeader,Divider,XTable,Cell} from "vux";

export default {
  data() {
    return {
      list_1: [],
      list_2: [],
      list_3: [],
      list_4: [],

      searchKey: "",
      comdity_name:""
    };
  },
  watch: {},
  mounted() {
    this.searchKey = this.$route.params["imei"]||'AC4AFEE23E43';
    this.comdity_name=this.$route.params["comdity_name"];
    this.search();
  },
  methods: {
    handleSearch() {
      if (this.searchKey == "") return;
      this.search();
    },
    search() {
      this.$store
        .dispatch("terminal_index_search", { sn: this.searchKey })
        .then(resp => {
          this.list_1 = _.find(resp.data, { code: "apply" }).list1;
          this.list_2 = _.find(resp.data, { code: "library" }).list1;
          this.list_3 = _.find(resp.data, { code: "storage" }).list1;
          this.list_4 = _.find(resp.data, { code: "ready" }).list1;
        });
    }
  },
  components: {
    XHeader,Divider,XTable,Cell
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
li {
  .title {
    padding-left: 20px;
  }
  .sub-title {
    font-size: 0.8em;
  }
  i {
    margin-left: 10px;
  }
  .btn {
    margin-top: 0.2em;
    padding: 0.1em 0.6em 0.3em;
    border: 1px solid #3fc7ff;
    border-radius: 0.7em;
    width: 3.5em;
    text-align: center;
  }
}
</style>
